<template>
  <el-dialog
    title="选择角色"
    :visible="show"
    @close="cancel"
    width="800"
  >
    <el-table
      ref="table"
      :data="items"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>
      <el-table-column
        prop="roleName"
        align="center"
        label="角色名称"
      />
      <el-table-column
        prop="status"
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          {{ parseInt(scope.row.status)===1?"启用":"禁用" }}
        </template>
      </el-table-column>
    </el-table>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="cancel"
        size="small"
      >取 消</el-button>
      <el-button
        type="primary"
        size="small"
        @click="ok"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: 'SelectRoleList',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      roles: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        items: [],
        multipleSelection: []
      }
    },
    async created () {
      await this.getItems()
      this.$watch('show', newValue => {
        if (!newValue) return
        this.$refs.table.clearSelection()
        const filter = this.items.filter(item => {
          return this.roles.findIndex(i => parseInt(i) === parseInt(item.id)) > -1
        })
        filter.forEach(item => {
          this.$refs.table.toggleRowSelection(item)
        })
      })
    },
    methods: {
      cancel () {
        this.$emit('cancel')
      },
      ok () {
        this.$emit('select', this.multipleSelection)
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: 1000,
          roleName: ''
        }
        const { data } = await this.$service.gzl.queryRoleList(params)
        this.items = data.data.records
      }
    }
  }
</script>

<style scoped>

</style>
